<template>
	<view class="user-info-container" :style="{height: `${windowHeight}px`}">
		<view class="header-section">
			<image :src="friendUserInfo.avatar" :style="'width:'+cropperW+'px;height:'+cropperH+'px'" mode="aspectFill">
			</image>
		</view>
		<view class="body-section padding">
			<view class="core-info">
				<view class="u_nickname text-sl padding-tb-xs">
					{{friendUserInfo.nickName}}
				</view>
				<view v-if="friendUserInfo.phonenumber" class="u_phonenumber padding-tb-xs">
					电话：{{friendUserInfo.phonenumber}}
				</view>
				<view v-if="friendUserInfo.email" class="u_email padding-tb-xs">
					邮件：{{friendUserInfo.email}}
				</view>
				<view v-if="friendUserInfo.remark" class="u_remark padding-tb-xs text-gray">
					{{friendUserInfo.remark}}
				</view>
			</view>
			<view class="basic-info">

			</view>
			<view class="extend-info">

			</view>
		</view>
		<view class="footer-section padding">
			<view class="btn-phone" @click="phoneClink">
				<uni-icons class="phone-icon" type="phone" size="30"></uni-icons>
				<text class="phone-text">拨打电话</text>
			</view>
			<!-- <view class="btn-more" @click="messageDetailClick(friendUserInfo)">
				<uni-icons class="more-icon" type="chatboxes" size="30"></uni-icons>
				<text class="more-text">更多信息</text>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		queryFriendUserInfo
	} from '@/api/im/friend.js'
	import config from '@/config'

	let sysInfo = uni.getSystemInfoSync()
	let SCREEN_WIDTH = sysInfo.screenWidth
	export default {
		data() {
			return {
				userId: '',
				friendUserInfo: {},
				name: this.$store.state.user.name,
				imageSrc: 'https://t12.baidu.com/it/u=2689445641,171676043&fm=30&app=106&f=PNG?w=640&h=375&s=633732C468563ED4302A5C050300F0C8',
				cropperW: SCREEN_WIDTH,
				cropperH: SCREEN_WIDTH
			}
		},
		computed: {
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight - 50
			}
		},
		onLoad(event) {
			console.log("eventeventeventevent");
			console.log(event.userId);
			this.userId = event.userId;
			var that = this;
			queryFriendUserInfo(that.userId).then(response => {
				that.friendUserInfo = response.data;
				if (!that.friendUserInfo.avatar) {
					that.friendUserInfo.avatar =
						'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201912%2F25%2F20191225224833_zloky.thumb.400_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1712246351&t=cad0fe94ebb387852bfff79b193399c3'
				} else {
					that.friendUserInfo.avatar = config.baseUrl + that.friendUserInfo.avatar
				}
			});
		},
		methods: {
			phoneClink() {
				uni.makePhoneCall({
					phoneNumber: this.friendUserInfo.phonenumber,
					success(res) {
						console.log(res);
					},
					fail(err) {
						console.log(err);
						uni.showModal({
							title: "失败！"
						})
					},

				})
			},
			messageDetailClick(item){
				console.log(item);
				uni.navigateTo({
					url: '/pages/message/detail?userId=' + item.userId
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f6f7;
	}

	.user-info-container {
		width: 100%;
		height: 100%;

		.header-section {
			color: white;
		}

		.btn-phone {
			align-items: center;
			height: 50px;
			/* border-color: red; */
			border-top: dotted 1px grey;
			border-bottom: dotted 1px grey;
			line-height: 50px;
			text-align: center;
			font-size: 20px;
			vertical-align: middle;

			.phone-icon {
				font-size: 22px !important;
			}

			.phone-text {
				font-size: 20px;
			}
		}

		.btn-more {
			height: 50px;
			/* border-color: red; */
			border-bottom: dotted 1px grey;
			line-height: 50px;
			text-align: center;
			font-size: 20px;
			vertical-align: middle;

			.more-icon {
				font-size: 22px !important;
			}
		}
	}
</style>